<!-- Add Item
- description
- id
- base price

Add auction
- start time
-end time
- id
- item

New Auction
Cancel Auction
View All Auctions and status
Rating and Comments -->

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
    $(document).ready(function() {    
    	 
    	loadActiveAuctions();
    	loadFinishedAuctions();
    	
       
        $( "#cancel-dialog" ).dialog({
            autoOpen: false,
            height: 400,
            width: 450,
            modal: true,
            buttons: {
              "Cancel Now": function() {
                $("#cancel-form").submit();
                $( this ).dialog( "close" );
                alert('Cancel auction successfully!');
              },
              Cancel: function() {
                $( this ).dialog( "close" );
              }
            }
          });
        
        $( "#monitor-dialog" ).dialog({
            autoOpen: false,
            height: 400,
            width: 450,
            modal: true,
            open: function (event, ui){
            	
            	//while(1)setInterval(realTimeMonitor, 5000);
            }, 
            buttons: {
              /* "Monitor": function() {
                $("#monitor-form").submit();
                $( this ).dialog( "close" );
              }, */
              Cancel: function() {
                $( this ).dialog( "close" );
              }
            }
          });
    });
    
    //setInterval(realTimeMonitor, 5000);
    
    function realTimeMonitor() {
    	$('#bidTable').html("");
    	var aid= $("#auctionIdField2").val()
    	console.log("aid: "+aid);
        showMonitorBids(aid);
    }
    
    function cancelAuction(that){
    	var aid= $(that).attr("id");
    	var hp = $(that).data('hp');
    	var bp = $(that).data('bp');
    	$("#auctionIdField").val(aid);
    	$("#endTime").text(hp);
    	$("#itemName").text(bp);
    	$( "#cancel-dialog" ).dialog( "open" );
    }
    
    function monitor(that){
    	var aid= $(that).attr("id2");
    	var hp = $(that).data('hp2');
    	var bp = $(that).data('bp2');
    	$("#auctionIdField2").val(aid);
    	$("#endTime2").text(hp);
    	$("#itemName2").text(bp);

    	//clear table
    	$('#bidTable').html("");
    	showMonitorBids(aid);
    	
    	$( "#monitor-dialog" ).dialog( "open" );
    	
    	
    	
    }
    
    
    function showMonitorBids(aid){
    	
    	
    	$.post('/monitorAuction',{auctionId2: aid},function(response) { 
    		//populate table
    		var json= jQuery.parseJSON(response);
	        if (json.length==0){
	        	   $(table).append($('<td>').text("No bids so far!!"));
	        	   
	        }else{
	        	   
	        	  var table = $('#bidTable');
	        	  
	        	  $('<tr>').appendTo(table)  
	 	            .append($('<td>').text("Item Name"))
	 	            .append($('<td>').text("Creation date"))
	 	            .append($('<td>').text("Buyer ID"))
	 	            .append($('<td>').text("Bid Price"));
	 	            
	        	  $.each(json, function (i, element) {
	           	   var row=$('<tr>');   
	   	            row.append($('<td>').text(element.itemName))
	   	            .append($('<td>').text(element.dateCreated))
	   	            .append($('<td>').text(element.userId))
	   	            .append($('<td>').text(element.price));
	   	            $(table).append(row);
	           	  });
	           }
    		
    		
		});
    }
    
    function poll() {
        $.post('/update',{},function() { 
		});
        //loadActiveAuctions();
        //loadFinishedAuctions();
    }
    
    setTimeout(poll, 1000);
    //setInterval(poll, 1000);
    setInterval(poll, 3600000);
    
    function loadActiveAuctions(){
		
		//display auctions
    	$.post('/viewAuction',{},function(responseText) { 
			$('#auctionItems').html(responseText);  
		});
	}
	
	function loadFinishedAuctions(){
		
		//display all auctions
    	$.post('/viewAllAuctions',{},function(responseText) { 
			$('#allAuctionItems').html(responseText);  
		});
	}
	
	function validateAuction(){
    	var input = $("#itemBP").val();
    	var itemDesc = $("#itemDesc").val();
    	var itemET = $("#itemET").val();
    	
    	if (input==""){
    		alert("Please enter a base price!");
    		return false;
    	}else if (!$.isNumeric(input)){
    		alert("Please enter a numeric value!");
    		return false;
    	}else if (parseInt(input)<=0){
    		alert("Please enter a value greater than zero!");
    		return false;
    	}else if (itemDesc==""){
    		alert("Please enter item description!");
    		return false;
    	}else if (itemET==""){
    		alert("Please enter a date!");
    		return false;
    	}else{
    		return true;
    	}
    	
    }
    	
</script>


<title>Seller</title>
<!-- <link href="Site.css" rel="Stylesheet" type="text/css"/>
 -->
 </head>
<body>

<div id="container" >
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  autocomplete="on" action="createAuction" onsubmit="return validateAuction();" method="post"> 
                <h1>Create New Auction</h1> 
                <p> 
                    <label for="itemDesc" > Item Description: </label>
                    <input id="itemDesc" name="itemDesc" required="required" type="text" />
                </p>
                <p> 
                    <label for="itemBP" > Base Price: $</label>
                    <input id="itemBP" name="itemBP" required="required" type="text"  /> 
                </p>
                <p> 
                    <label for="itemET"> End Date (dd/mm/yyyy): </label>
                    <input id="itemET" name="itemET" required="required" type="text"  /> 
                    
                </p>
                <p> 
                    <label for="itemET"> End Time: </label>
                    <select name="EThour" id="EThour" value="EThour" >
					  <option value="1">1:00</option>
					  <option value="2">2:00</option>
					  <option value="3">3:00</option>
					  <option value="4">4:00</option>
					  <option value="5">5:00</option>
					  <option value="6">6:00</option>
					  <option value="7">7:00</option>
					  <option value="8">8:00</option>
					  <option value="9">9:00</option>
					  <option value="10">10:00</option>
					  <option value="11">11:00</option>
					  <option value="12">12:00</option>
					</select>
                    <select name="ETampm" id="ETampm" value="ETampm" >
					  <option value="am">AM</option>
					  <option value="pm">PM</option>
					</select>
                </p>
                <p class="createAuctionButton"> 
                    <input type="submit" value="Create Auction" /> 
                </p>
            </form>
        </div>
        
        <div id="auctiondiv" class="animate form" >
                <h1>My Active Auctions</h1>   
                <input type="button" value="Refresh" onclick="loadActiveAuctions()"></input>
                <div id = "auctionItems"></div>
        </div>
        
        <div id="allauctiondiv" class="animate form" >
                <h1>Finished Auctions</h1>   
                <input type="button" value="Refresh" onclick="loadFinishedAuctions()"></input>
                <div id = "allAuctionItems"></div>
        </div>       
         
         <form name="toRating" method="GET" action="/redirect">
		    <input type="hidden" name="page" value="rating">
		    <A HREF="javascript:document.toRating.submit()"><h1>View My Rating/Comments</h1></A>
		</form>

        <form name="toLogout" method="GET" action="/redirect">
		    <input type="hidden" name="page" value="logout">
		    <A HREF="javascript:document.toLogout.submit()"><h1>Logout!</h1></A>
		</form>
        
    </div>
</div>  

<div id="cancel-dialog" title="Cancel Auction">
 
  <form id="cancel-form" action="cancelAuction" method="post" >
  <fieldset>
	<label for="auctionId">Auction ID:</label>
  	<input type="text" name="auctionId" id="auctionIdField" value=""/>
  	<p>Item Name: <div id="itemName"></div></p>
  	<p>End Time: <div id="endTime"></div></p>
  </fieldset>
  </form>
</div>

<div id="monitor-dialog" title="Monitor Auction">
 
  <form id="monitor-form" >
  <fieldset>
  <input type="button" value="Refresh" onclick="realTimeMonitor()"></input>
	<label for="auctionId2">Auction ID:</label>
  	<input type="text" name="auctionId2" id="auctionIdField2" value=""/>
  	<p>Item Name: <div id="itemName2"></div></p>
  	<p>End Time: <div id="endTime2"></div></p>
  	<p>All Bids: <table border="1" id="bidTable"></table></p>
  </fieldset>
  </form>
</div>

  </body>
</html>